<template>
  <div>
    <!-- 会员中心 -->
    <div style="width: 100%; height: 1000px; background-size: cover;">
      <div style="padding-top: 180px;">
        <div class="login-box">
          <div class="login-title">注册</div>
          <div class="login-form">
            <form action="./member/register/" id="form" @submit.prevent="register">
              <!--账户名-->
              <div class="form-item user">
                <div class="form-ctrl">
                  <input type="text" name="username" required="" id="username" @blur="isRegister" class="form-control" placeholder="请输入登录账号">
                </div>
              </div>

              <div class="form-item pass">
                <div class="form-ctrl">
                  <input type="text" name="nickname" required="" id="nickname" class="form-control" placeholder="请输入账号昵称">
                </div>
              </div>

              <div class="form-item pass">
                <div class="form-ctrl">
                  <input type="password" name="password" required="" id="password" class="form-control" placeholder="请输入登录密码">
                </div>
              </div>

              <div class="form-item pass">
                <div class="form-ctrl">
                  <input type="password" name="rpassword" required="" id="rpassword" class="form-control" placeholder="请再次输入登录密码">
                </div>
              </div>

              <!--验证码-->
              <div class="form-item pass">
                <div class="form-ctrl">
                  <input type="text" name="mobilephone" required="" id="mobilephone" class="form-control" placeholder="请输入手机号">
                </div>
              </div>
              <div class="form-group">
                <div class="row">
                  <div class="col-6">
                    <input type="text" name="checkcode" required="" id="checkcode" class="form-control" placeholder="请输入验证码">
                  </div>
                  <div class="col-6">
                    <input type="button" id="btn" class="btn btn-info mb-2" value="发送验证码" @click="settime" style="width: 100px; height: 50px; background: #8c8a73; border: none;">
                  </div>
                </div>
              </div>

              <!--记住密码-->
              <div class="form-item box">
                <div class="rememb">
                  <div class="checkbox-group">
                    <input type="checkbox" checked="checked" id="save_pass" class="isRemberPass">
                    <label for="save_pass" class="checkbox">
                      <a href="./xieyi/">《用户协议》</a>
                    </label>
                  </div>
                </div>
              </div>

              <!--登录按钮-->
              <div class="form-item form-button">
                <button type="submit" class="btn btn-green block btn-login">注册</button>
              </div>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/styles/animate.min.css";
import "@/assets/styles/lhcommon.css";
import "@/assets/styles/login.css";

import "@/assets/styles/bootstrap.min.css";
import "@/assets/fonts/iconfont.css";
import "@/assets/styles/aoyun.css";
import "@/assets/styles/swiper.min.css";
import "@/assets/styles/login.css";
import "@/assets/styles/custom.css";


export default {
  data() {
    return {
      captchaSrc: '/code.php',
      countdown: 60,
      isCounting: false
    };
  },
  mounted() {
    this.refreshCaptcha();
  },
  methods: {
    refreshCaptcha() {
      this.captchaSrc = `/code.php?${Math.round(Math.random() * 10)}`;
      console.log(this.captchaSrc);
    },
    settime() {
      const phone = document.getElementById("mobilephone");
      if (phone.value === "") {
        alert("请输入手机号！");
        return;
      } else if (!phone.value.match(/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/)) {
        alert("手机号码格式不正确！");
        return;
      }

      if (this.isCounting) return;

      this.isCounting = true;
      const interval = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
          const btn = document.getElementById("btn");
          btn.value = `重新发送(${this.countdown})`;
          btn.setAttribute("disabled", true);
        } else {
          clearInterval(interval);
          this.countdown = 60;
          this.isCounting = false;
          const btn = document.getElementById("btn");
          btn.value = "发送验证码";
          btn.removeAttribute("disabled");
        }
      }, 1000);
    },
    register(event) {
      // 处理注册逻辑
      event.preventDefault();
      // 你可以在这里添加 AJAX 请求或其他逻辑
      console.log("注册表单提交");
    },
    isRegister() {
      // 处理账号验证逻辑
      console.log("账号验证");
    }
  }
};
</script>

<style>
#baiduMap img {
  width: auto !important;
  min-width: 200% !important;
}
</style>
